<template>
    <div>
        <div class="namespace-dropdown">
            <label for="namespace">选择命名空间：</label>
            <select v-model="selectedNamespace" @change="handleNamespaceChange">
                <option value="">全部命名空间</option>
                <option v-for="ns in namespaces" :value="ns" :key="ns">{{ ns }}</option>
            </select>
        </div>
        <!-- 在 namespace.vue 中嵌套 pod.vue 组件，并将所选命名空间传递给它 -->
        <!-- <pod ></pod> -->
        <div>
            <pod :namespace="selectedNamespace"></pod>
        </div>
    </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import { getAllNamespaceApi } from '@/api/clusterManagement';
import Pod from './pod.vue';

export default {
    name: 'Namespace',
    components: {
        Pod
    },
    setup() {
        const selectedNamespace = ref('default');
        const namespaces = ref([]);

        const fetchNamespaces = () => {
            // 向后端发送请求获取所有命名空间列表
            getAllNamespaceApi()
                .then(response => {
                    namespaces.value = response.data;
                })
                .catch(error => {
                    console.error('Error fetching namespaces:', error);
                });
        };

        const handleNamespaceChange = () => {
            // 当命名空间变化时触发该方法，此时会重新获取 pod 列表
            // 向父组件传递所选命名空间
            console.log(selectedNamespace.value); // 仅用于调试
        };
   
        // 在组件加载时获取所有命名空间列表
        onMounted(() => {
            fetchNamespaces();
        });

        return {
            selectedNamespace,
            namespaces,
            handleNamespaceChange,
        };
    }
};
</script>

<style scoped>
/* 这里是你的样式 */
/* ... */
</style>
